<template>
  <div style="position:relative">
  <div class="pagetitle ">分类</div>
  <div class="pageSecondtitle ">共：{{count}} 个</div>

    <!-- 分类列表 -->
  <div class="categeword-body">    

    <router-link
          v-for="item of categoryList"
          :key="item.id"
          :to="'/categories/' + item.id"
          class="catageword"
        >
        <div>{{ item.categoryName }}<span style="font-size:12px">[{{item.articleCount}}]</span></div>
        </router-link>
      <!-- <tag-cloud :data="tagListName" @clickTag="clickTagItem" style=""></tag-cloud> -->
  </div>

  </div>
</template>

<script>
export default {
  created() {
    this.listCategories();
  },
  data: function() {
    return {
      categoryList: [],
      count: 0
    };
  },
  methods: {
    listCategories() {
      this.axios.get("/categories").then(({ data }) => {
        this.categoryList = data.data.recordList;
        this.count = data.data.count;
      });
    }
  },
  computed: {
    cover() {
      var cover = "";
      this.$store.state.blogInfo.pageList.forEach(item => {
        if (item.pageLabel == "category") {
          cover = item.pageCover;
        }
      });
      return "background: url(" + cover + ") center center / cover no-repeat";
    }
  }
};
</script>

<style scoped>
.categeword-body{
  display:flex;
  flex-direction:row;
  width:35vh;
  flex-wrap:wrap;
  justify-content:space-around;
  margin:40px auto;
  gap: 20px;
}
.catageword{
  background: #F6F8FA;
}
</style>
